<template>
	<view>
		<block v-if="loading > 0">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">车辆详情</view>
		</view>
		<view class="bg_box">
			<view class="clear_box"></view>
			<image class="bg01" :src="realUrl(images[0])" mode="widthFix"></image>
			<view class="bg_content">
				<view class="product_box">
					<view class="title">{{car.title}}</view>
					<view class="tag_box">
						
						<view class="tag" v-if="car.is_check" >
								<u-link :href="car.check_url" fontSize="3vw" color="#BC8519" text="检测报告"></u-link>
							</view>
						<view class="tag" v-if="car.state == 1">精品车</view>
						<view class="tag" v-if="car.state == 2">瑕疵车</view>
						<view class="tag" v-if="car.energy">{{car.energy}}</view>
						<view class="tag" v-for="(item,idx) in label">{{item.title}}</view>
						
					</view>
					<view class="time_box">
						<view class="time">发布：{{car.update_time|formatTime}}</view>
						<view class="volume">已租次数 {{car.click}}+</view>
					</view>
				</view>

				<view class="message_box">
					<view class="title">车辆信息</view>
					<view class="menu_box">
						<view class="menu">
							<view class="num">{{car.reg_time|formatDate1}}</view>
							<view class="text">上牌时间</view>
						</view>
						<view class="menu">
							<view class="num">{{car.mileage}}万里</view>
							<view class="text">表显里程</view>
						</view>
						<view class="menu">
							<view class="num">{{car.color}}</view>
							<view class="text">外观颜色</view>
						</view>
					</view>
					<view class="other_box">
						<view class="other">
							<view class="o">排量</view>
							<view class="o" @click="show(car.output)" >{{car.output}}</view>
						</view>
						<view class="other">
							<view class="o">变速箱</view>
							<view class="o" @click="show(car.gearbox)">{{car.gearbox}}</view>
						</view>
						<view class="other">
							<view class="o">排放标准</view>
							<view class="o" @click="show(car.outext)">{{car.outext}}</view>
						</view>
						<view class="other">
							<view class="o">厂家类型</view>
							<view class="o" @click="show('国产')" v-if="car.factory_type == 0">国产</view>
							<view class="o" @click="show('合资')" v-if="car.factory_type == 1">合资</view>
							<view class="o" @click="show('进口')" v-if="car.factory_type == 2">进口</view>
							
						</view>
						<view class="other">
							<view class="o">车辆类型</view>
							<view class="o" @click="show(car.type_name)">{{car.type_name}}</view>
						</view>
						<view class="other">
							<view class="o">能源类型</view>
							<view class="o" @click="show(car.energy)">{{car.energy}}</view>
						</view>
					</view>
				</view>

				<view class="message_box">
					<view class="title">车辆描述</view>
					    <view class="description">
					        <u-parse :content="car.content"></u-parse>
						</view>
				</view>

				<view class="message_box">
					<view class="title">车辆实拍</view>
					<view class="message_img">
						<block v-for="(img,idx) in images">
							<image @longpress.stop="long_save(img)" @click="previewImg(hand_imgs,idx)" class="img"
								:src="realUrl(img)" mode="widthFix"></image>
						</block>
					</view>
				</view>
				<view class="clear_box04"></view>
			</view>
		</view>
		   <view class="confirm sub" @click="$r('/pages/index/form01')">申请租车</view>
		
		</block>
		<view class="" v-if="loading == 0">
			<block>
				<u-loading-page iconSize="60" loadingText="正在加载中..." image="/static/logo02.png"
					:loading="true"></u-loading-page>
			</block>
		</view>
		
		
		

	</view>
</template>

<script>
	var RichText = require('@/common/richText.js');
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				scrrol: false,
				pupu_show: false,
				loading: 0,
				car: {},
				label: [],
				images: [],
				page: 1,
				load_type: 'more',
				is_plat: 1,
				comment_list: [],
				info: [],
				id : 0,
				pid : 0,
				saveImageToPhotosAlbum: true,
				phone: '',
				share_phone: '',
				share: {
					title: '六贝科技',
					path: '/pages/index/index',
					imageUrl: '',
					desc: '',
					content: ''
				},

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			hand_imgs() {
				let imgs = [];
				this.images.forEach(vo => {
					imgs.push(this.realUrl(vo));
				})
				return imgs;
			},
			hand_plat_phones(){
				if(this.vuex?.appInfo?.plat_phone){
					let str = this.vuex.appInfo.plat_phone.toString();
					let plat_phones = str.split('|');
					return plat_phones;
				}
			},
		},
		onLoad(opt) {
			this.id = opt.id || 0;
            this.initData();
			this.loadData();
		},
		filters: {
			formatDate1(timestamp) {
				if (!timestamp) {
					// return ''
				}
				var date = new Date(timestamp * 1000);
				var Y = date.getFullYear();
				var M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				return Y + '-' + M
			}
		
		},
		methods: {
			colsePupu() {
				this.pupu_show = !this.pupu_show;
			},
			long_save(img) {
				 this.down_img(img);
			},
			down_img(img){
				if (this.saveImageToPhotosAlbum) {
					uni.downloadFile({
						url: this.realUrl(img),
						success: res => {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: res => {
									this.showMsg('图片已保存到系统相册');
								},
								fail: () => {
									//this.showMsg('已取消');
								}
							});
						},
						fail: err => {
							this.showMsg('下载失败');
							this.saveImageToPhotosAlbum = false
						}
					})
				} else {
					uni.openSetting({
						success :res => {
							if (res.authSetting['scope.writePhotosAlbum']) {
								this.saveImageToPhotosAlbum = true
								this.long_save()
							} else {
								this.showMsg('需要授权保存到相册');
							}
						}
					})
				}
			},
			hand_share(item) {
				if (this.hasLogin && this.userInfo.vip_level == 2) {
					this.share_phone = this.userInfo.phone;
				} else {
					this.share_phone = this.hand_plat_phones[0]||'';
				}
				this.share.title = item.title;
				this.share.path = '/pages/goods/goods?id=' + item.id + '&phone=' + this.share_phone +'&pid='+this.this.userInfo.id;
				this.share.image_url = this.realUrl(item.logo);
				this.share.desc = "联系电话:" + this.share_phone;
				this.share.content = RichText.format(item.content);
			},
			show(str) {
				if (!uni.$u.test.isEmpty(str)) {
					this.showMsg(str, 1500);
				}
			},
			car_detail() {
				let url = this.site_url + 'api/index/car_more_info';
			},
			openPhone(){
				if(this.is_plat == 0){
					this.call_share_phone();
				}else{
					this.colsePupu();
				}
			},
			call_share_phone() {
				let phone = this.phone;
				uni.showModal({
					title: '联系车源',
					content: phone,
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							uni.makePhoneCall({
								phoneNumber: phone, //仅为示例
								success: (res) => {
									this.call_hand();
								}
							});
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			call_hand() {
				let url = this.site_url + 'api/index/call_hand?id=' + this.car.id;
				this.areq(url).then(res => {
			
				})
			},
			//去重
			jun_filter(arr) {
				let map = new Map();
				return arr.filter((item) => !map.has(item.toString()) && map.set(item.toString()))
			},
			set_visit(id) {
				let ids = uni.getStorageSync('visit_list');
				if (ids) {
					let arr = ids.split(',');
					arr.push(id);
					arr = this.jun_filter(arr);
					if (arr.length > 20) {
						arr.shift();
					}
					uni.setStorageSync('visit_list', arr.join(','));
				} else {
					uni.setStorageSync('visit_list', id);
				}
			},
			initData() {
				let url = this.site_url + 'api/index/car_detail?id=' + this.id;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.loading = 1;
						this.set_visit(this.id);
						let list = res.data;
						this.images = list.images.split('|');
						this.label = JSON.parse(list.labels);
						if (this.phone == '') {
							this.phone = this.vuex.appInfo.plat_phone;
						}
						this.car = list;
						// setTimeout(() => {
						// 	 this.hand_share(list);
						// }, 300)
			
					} else {
						this.showMsg(res.msg);
					}
			
				})
			},
			loadData() {
				if (this.load_type == 'loading' || this.load_type == 'no_more') {
					return;
				}
				let url = this.site_url + 'api/index/comment_list?page=' + this.page;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.page++;
						this.comment_list = [...this.comment_list, ...res.data];
						this.load_type = 'more';
					} else {
						this.load_type = 'no_more';
					}
			
				})
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
	
	}
</script>

<style>
	/deep/.u-link{
		line-height : none !important;
		display: inline-block !important;
	}
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 100%;
		position: absolute;
		left: 0;
		top: calc(40vh + var(--status-bar-height));
		z-index: 98;
		background-color: #F8F8F8;
		border-radius: 3vw 3vw 0 0;
		padding: 4%;
	}

	.product_box {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4%;
	}

	.product_box .title {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		line-height: 7vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.product_box .tag_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 1vw;
	}

	.product_box .tag_box .tag {
		height: 6vw;
		line-height: 6vw;
		padding: 0 1.5vw;
		border-radius: 1vw;
		font-size: 2.8vw;
		margin-left: 1vw;
		background-color: #F7F8FD;
		color: #222222;
	}

	.product_box .tag_box .tag:nth-child(1) {
		margin-left: 0;
	}

	.product_box .tag_box .tag:nth-child(1) {
		background-color: #FDF1C2;
		color: #BC8519;
	}

	.product_box .tag_box .tag:nth-child(2) {
		background-color: #FEEFEC;
		color: #DB2114;
	}

	.product_box .tag_box .tag:nth-child(3) {
		background-color: #F7F8FD;
		color: #222222;
	}

	.product_box .time_box {
		width: 100%;
		padding-top: 4%;
		border-top: 1px solid #F1F2F5;
		display: flex;
		align-items: center;
		margin-top: 4%;
	}

	.product_box .time_box .time {
		font-size: 3.2vw;
		color: #979AA9;
		flex: 1;
	}

	.product_box .time_box .volume {
		font-size: 3.2vw;
		color: #979AA9;
		flex: 1;
		text-align: right;
	}

	.message_box {
		width: 100%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4%;
	}

	.message_box .description {
		width: 100%;
		font-size: 3.5vw;
		margin-top: 4%;
		color: #333;
		line-height: 6vw;
	}
	
	.message_box .message_img{
		width: 100%;
		margin-top: 4%;
	}
	
	.message_box .message_img image{
		width: 100%;
	}

	.message_box .title {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}

	.message_box .menu_box {
		width: 100%;
		background-color: #FDF8F6;
		padding: 4vw 0;
		border: 1px solid #FFB599;
		display: flex;
		align-items: center;
		border-radius: 3vw;
		margin-top: 4vw;
	}

	.message_box .menu_box .menu {
		flex: 1;
	}

	.message_box .menu_box .menu .num {
		font-size: 4vw;
		font-weight: bold;
		color: #333;
		text-align: center;
	}

	.message_box .menu_box .menu .text {
		font-size: 3.5vw;
		color: #606470;
		text-align: center;
		margin-top: 2vw;
	}

	.other_box {
		margin-top: 4%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.other_box::after {
		flex: auto;
		content: '';
	}

	.other_box .other {
		width: 44%;
		margin-left: 12%;
		display: flex;
		align-items: center;
		margin-top: 3vw;
	}

	.other_box .other:nth-child(2n + 1) {
		margin-left: 0;
	}

	.other_box .other .o {
		flex: 1;
		font-size: 3.5vw;
	}

	.other_box .other .o:nth-child(1) {
		color: #8B8C9F;
	}

	.other_box .other .o:nth-child(2) {
		color: #1E2128;
	}
</style>